<template>
  <div class="allbox">
    <div class="navs">
      <span>协催管理</span> > <span>导航</span>
    </div>
    <p class="pdl10">您要使用哪个功能？</p>
    <div class="lists">
      <ul>
        <li >
          <!-- @mouseenter="add" :class = "{ add: cssdis }" @mouseleave="disnone"-->
          <img src="http://frsoft.com.cn:6060/CCDS/images/dsIcon/ass/assMail1.gif" height="60" width="60"/>
          <span>待处理信函</span>
        </li>
        <li>
          <img src="http://frsoft.com.cn:6060/CCDS/images/dsIcon/ass/assMail2.gif" height="60" width="60"/>
          <span>信函记录</span>
        </li>
        <li>
          <img src="http://frsoft.com.cn:6060/CCDS/images/dsIcon/ass/caseAss.gif" height="60" width="60"/>
          <span>待处理协催</span>
        </li>
        <li>
          <img src="http://frsoft.com.cn:6060/CCDS/images/dsIcon/ass/caseAss2.gif" height="60" width="60"/>
          <span>协催记录</span>
        </li>
        <li>
          <img src="http://frsoft.com.cn:6060/CCDS/images/dsIcon/ass/bankCp.gif" height="60" width="60"/>
          <span>待银行对账</span>
        </li>
        <li>
          <img src="http://frsoft.com.cn:6060/CCDS/images/dsIcon/ass/bankCp2.gif" height="60" width="60"/>
          <span>还款记录</span>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'assistmanage',
    data:function(){
      return{
        cssdis:false
      }
    },
    methods :{
      add:function () {
        this.cssdis = true;
        console.log(555)
      },
      disnone:function () {
        this.cssdis = false;
      }
    },
    created:function(){
      this.$http.get("http://jsonplaceholder.typicode.com/users").then((data)=>{
        console.log(data.body[0])


      })
    }
  }
</script>

<style scoped>
  .allbox{
    font-size: 12px;
    width: 99.2%;

    margin: 0 auto;
    border:1px solid #999;
    overflow: hidden;
    box-sizing: border-box;
  }
  .navs{
    width: 100%;
    font-size: 12px;
    line-height: 36px;
    border-bottom: 1px solid #bebebe;
    background: #dadada;
    color: #000033;
    padding-left:10px;

  }
  .pdl10{
    padding-left: 10px;
  }
  li{list-style:none}
  .lists{
    width: 100%;
    overflow: hidden;
  }
  .lists ul{
    overflow: hidden;
  }
  .lists ul li{
    width: 44%;
    float: left;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 20px;
  }
  .lists ul li:hover{
    background: #f0f5fe;
    color: #234995;
  }
  .lists ul li img,.lists ul li span{
    float: left;
  }
  .lists ul li span{
    line-height: 60px;
    font-weight: 600;
  }
  .add{
    background: #f0f5fe;
  }
</style>

